import React, { useCallback, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { Button, Menu } from 'antd';

import MonthBill from './components/MonthBill';
import DayBill from './components/DayBill';
import BillDetail from './components/BillDetail';
import { getCompanyBill } from 'admin/servers/servers';
import { CompanyBillResponse } from 'admin/schema/EnterpriseBill';
import { debounce } from 'lodash';

import store from 'store';

import './style.scss';

const EnterpriseBill: React.FC = () => {
  const history = useHistory();
  const params: any = useParams();

  const [menuData, setMenuData] = useState<any>([]);
  const [accountDetail, setAccountDetail] = useState<CompanyBillResponse>({} as any);
  const currentMenu = params.type ? String(params.type) : 'month';
  const { companyId } = store.getState().userInfo;

  // 横向菜单配置
  const getMenuData = useCallback(
    () => [
      {
        key: 'month',
        title: '月账单',
        component: <MonthBill companyId={companyId} key="month" />,
      },
      {
        key: 'day',
        title: '日账单',
        component: <DayBill companyId={companyId} key="day" />,
      },
      {
        key: 'detail',
        title: '账单明细',
        component: <BillDetail companyId={companyId} key="detail" />,
      },
    ],
    [companyId]
  );

  // 查询账户信息
  const getAccountDetail = useCallback(async () => {
    try {
      console.log('当前企业id:', companyId);
      const { data } = await getCompanyBill({ companyId });
      setAccountDetail(data);
    } catch (error) {
      console.error(`系统异常: ${JSON.stringify(error)}`);
    }
  }, [companyId]);

  useEffect(() => {
    getAccountDetail();
    const menus = getMenuData();
    setMenuData(menus);
  }, [getAccountDetail, getMenuData]);

  /**
   * 充值记录弹窗
   */
  const openChargeList = debounce(() => {
    history.replace(`/webapp/enterpriseBill/recharge`, { type: currentMenu });
  }, 500);

  return (
    <div className="enterprise-bill">
      <div className="nav">
        {menuData.length > 0 && (
          <Menu className="menu" mode="horizontal" selectedKeys={[currentMenu]}>
            {menuData.map((item: any) => {
              return (
                <Menu.Item
                  key={item.key}
                  className="custom-menu-item unselect-words"
                  onClick={() => {
                    history.replace(`/webapp/enterpriseBill/${item.key}`);
                  }}
                >
                  {item.title}
                </Menu.Item>
              );
            })}
          </Menu>
        )}
        <div className="nav-right">
          账户余额：{accountDetail.accountBalance || '0'} 元
          <Button type="link" size="large" onClick={openChargeList}>
            充值记录
          </Button>
        </div>
      </div>
      {/* 当前展示的组件 */}
      <div className="main-wrap">
        {menuData.map((item: { key: string; component: any }) => {
          return item.key === currentMenu && item.component;
        })}
      </div>
    </div>
  );
};

export default EnterpriseBill;
